<template>
	<div class="layoutContainer">
		<div class="layoutHeader">
      <minHeader :menusStructure="menusStructure" />
    </div>
		<div class="layoutWrapper">
			<StarBackground />
			<div class="layoutTop">
				<a-breadcrumb >
					<a-breadcrumb-item>
						<router-link :to="`/teacher`">首页</router-link>
					</a-breadcrumb-item>
					<a-breadcrumb-item>
						{{ projectName }}
					</a-breadcrumb-item>
				</a-breadcrumb>
			</div>
			<div class="layoutContent">
				<div class="left">
					<minMenu style="flex-shrink: 0;" :structure="items" :messages="state.messages" />
					<div class="ai">
						<minAi url="/ai/dify/system/chat/chatMessages" />
						<!-- <AIConsulting size="small" type="chat"></AIConsulting> -->
					</div>
				</div>
				<div class="content">
					<router-view v-slot="{ Component, route }">
            <keep-alive>
              <component :is="Component" :key="route.fullPath"  v-if="route.meta.keepAlive"/>
            </keep-alive>
            <component :is="Component" v-if="!route.meta.keepAlive"/>
          </router-view>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import StarBackground from '@/components/StarBackground.vue'
import minHeader from '@/components/common/minHeader.vue'
import { useRoute, useRouter } from 'vue-router'
import { reactive, ref, provide } from 'vue'
import { state, refreshMessages } from '@/stores/info.js'
import { signOut } from '@/request/login.js'
import * as antIcons from '@ant-design/icons-vue'
import process from '@/router/process'
import AIConsulting from '@/components/AIConsulting.vue'
import minMenu from '@/components/common/minMenu.vue'
import minAi from '@/components/common/minAi.vue'

const menusStructure = []
const route = useRoute()
const projectName = ref('')
if (route.query.name && route.query.id) sessionStorage.setItem('pojectInfo', JSON.stringify(route.query))
let pojectInfo = JSON.parse(sessionStorage.getItem('pojectInfo') || '{}')
projectName.value = route.query.name || projectName.value || pojectInfo.name ||''
provide('pojectInfo', pojectInfo)

refreshMessages(pojectInfo)
const router = useRouter()
const items = ref(
	process[0].children.map((val) => {
		return {
			path: val.path,
			label: val.meta.title,
			query:route.query
		}
	})
)
console.log(pojectInfo.type)
if (pojectInfo.type == 'learn') {
	items.value = items.value.filter((val) => ['数据展示', '成员列表', '项目设置'].includes(val.label))
}

const handleMenuClick = (item) => {
	router.push({ path: item.path })
}
const handleOut = async (e) => {
	router.replace('/login')
	localStorage.clear()
	sessionStorage.clear()
	await signOut()
}
</script>

<style lang="scss" scoped>
* {
	min-height: 0;
	min-width: 0;
}

.layoutContainer {
	height: 100%;
	width: 100%;
  display: flex;
  flex-direction: column;
  min-width: 0;
	.layoutHeader {
    width: 100%;
    display: flex;
    justify-content: center;
    background: #fff;
    .header {
      width: $viewMinWidth;
    }
  }
	.layoutWrapper {
		min-height: 0;
		min-width: 0;
		flex: 1;
    position: relative;
    display: flex;
		flex-direction: column;
		align-items: center;
    position: relative;
		.layoutTop {
			margin: 20px 0;
      width: $viewMinWidth;
		}
		.layoutContent {
			flex: 1;
      width: $viewMinWidth;
      display: flex;
			justify-content: space-between;
			.left {
        display: flex;
        flex-direction: column;
				margin: 0px 0 30px 0 ;
				width: 256px;
        .ai {
					flex-grow: 1;
					flex-shrink: 1;
					min-height: 0;
					width: 100%;
					padding-top: 30px;
					max-width:268px;
					max-height:839px;
				}
        ::v-deep .AIConsulting_agent_container {
          width: 100% !important;
        }
      }
			.content {
				border-radius: 8px;
				flex: 1;
				margin: 0px 0 30px 20px;
			}
		}
	}
	
}
</style>
